[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.09 0 0); --foreground: oklch(1 0 0); --card: oklch(0.13 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.13 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0.09 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.55 0 0); --accent: oklch(0.18 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.22 0 0); --input: oklch(0.22 0 0); --ring: oklch(0.4 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 1rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Manrope", "Manrope Fallback", sans-serif; --font-display: "Cal Sans", "Cal Sans Fallback", sans-serif; --font-heading: "Instrument Sans", "Instrument Sans Fallback", sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added noise texture overlay */ .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.015; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* Border beam animation for pricing */ @keyframes border-beam { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } .border-beam { animation: border-beam 8s linear infinite; } /* Shimmer animation for CTA */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer-btn { position: relative; overflow: hidden; } .shimmer-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; } /* Pulse glow for status indicators */ @keyframes pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; } 50% { opacity: 0.6; box-shadow: 0 0 8px currentColor; } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } /* Marquee animation */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee { animation: marquee 30s linear infinite; } /* Draw line animation for charts */ @keyframes draw-line { to { stroke-dashoffset: 0; } } .draw-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-line 2s ease-out forwards; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Manrope } from "next/font/google" import localFont from "next/font/local" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope", }) const calSans = localFont({ src: "./fonts/CalSans-SemiBold.woff2", variable: "--font-cal-sans", display: "swap", }) const instrumentSans = localFont({ src: "./fonts/InstrumentSans-Variable.woff2", variable: "--font-instrument-sans", display: "swap", }) export const metadata: Metadata = { title: "Apex - Enterprise SaaS Platform", description: "The modern platform for teams who ship fast. Built for scale, designed for speed.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children} ) } [V0_FILE]plaintext:file="app/fonts/CalSans-SemiBold.woff2" query="Cal Sans SemiBold font file" [V0_FILE]plaintext:file="app/fonts/InstrumentSans-Variable.woff2" query="Instrument Sans Variable font file" [V0_FILE]typescriptreact:file="components/smooth-scroll.tsx" "use client" import type React from "react" import { useEffect } from "react" import Lenis from "lenis" export function SmoothScroll({ children }: { children: React.ReactNode }) { useEffect(() => { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true, }) function raf(time: number) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf) return () => { lenis.destroy() } }, []) return <>{children} } [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState, useRef } from "react" import { motion } from "framer-motion" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" const navItems = [ { label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Docs", href: "#docs" }, { label: "Blog", href: "#blog" }, ] export function Navbar() { const [hoveredIndex, setHoveredIndex] = useState(null) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const navRef = useRef(null) return (

{/* Logo */}

Apex {/* Desktop Nav Items */}

{navItems.map((item, index) => ( setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} > {hoveredIndex === index && ( )} {item.label} ))}

{/* CTA Buttons */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {mobileMenuOpen && (

{navItems.map((item) => ( setMobileMenuOpen(false)} > {item.label} ))}

)} ) } [V0_FILE]typescriptreact:file="components/hero.tsx" "use client" import { motion } from "framer-motion" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" const avatars = [ "/professional-headshot-1.png", "/professional-headshot-2.png", "/professional-headshot-3.png", "/professional-headshot-4.png", "/professional-headshot-5.png", ] const textRevealVariants = { hidden: { y: "100%" }, visible: (i: number) => ({ y: 0, transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: i * 0.1, }, }), } export function Hero() { return (

{/* Background gradient */}

{/* Subtle radial glow */}

{/* Badge */} Now in Public Beta {/* Headline with text mask animation */}

Ship faster. Scale smarter.

{/* Subheadline */} The modern platform for teams who ship fast. Built for scale, designed for speed. Everything you need to build, deploy, and grow. {/* CTAs */} {/* Social Proof */}

{avatars.map((avatar, index) => (

))}

Trusted by 2,000+ teams worldwide

) } [V0_FILE]typescriptreact:file="components/logo-marquee.tsx" "use client" import { motion, useInView } from "framer-motion" import { useRef } from "react" const logos = [ { name: "Vercel", width: 100 }, { name: "Stripe", width: 80 }, { name: "Linear", width: 90 }, { name: "Notion", width: 100 }, { name: "Figma", width: 70 }, { name: "Slack", width: 90 }, { name: "Discord", width: 100 }, { name: "GitHub", width: 90 }, ] export function LogoMarquee() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

Trusted by industry leaders

{/* Fade masks */}

{/* Marquee container */}

{[...logos, ...logos].map((logo, index) => (

{logo.name[0]}

{logo.name}

))}

) } [V0_FILE]typescriptreact:file="components/bento-grid.tsx" "use client" import { motion, useInView } from "framer-motion" import { useRef, useEffect, useState } from "react" import { Activity, Command, BarChart3, Zap, Shield } from "lucide-react" const containerVariants = { hidden: {}, visible: { transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1], }, }, } function SystemStatus() { const [dots, setDots] = useState([true, true, true, false, true]) useEffect(() => { const interval = setInterval(() => { setDots((prev) => prev.map(() => Math.random() > 0.2)) }, 2000) return () => clearInterval(interval) }, []) return (

{dots.map((active, i) => ( ))}

) } function KeyboardCommand() { const [pressed, setPressed] = useState(false) useEffect(() => { const interval = setInterval(() => { setPressed(true) setTimeout(() => setPressed(false), 200) }, 3000) return () => clearInterval(interval) }, []) return (

⌘ K

) } function AnimatedChart() { const ref = useRef(null) const isInView = useInView(ref, { once: true }) const points = [ { x: 0, y: 60 }, { x: 20, y: 45 }, { x: 40, y: 55 }, { x: 60, y: 30 }, { x: 80, y: 40 }, { x: 100, y: 15 }, ] const pathD = points.reduce((acc, point, i) => { return i === 0 ? `M ${point.x} ${point.y}` : `${acc} L ${point.x} ${point.y}` }, "") return ( ) } export function BentoGrid() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

Everything you need to ship

Built for modern teams. Powerful features that help you build, deploy, and scale faster than ever.

{/* Large card - System Status */}

Real-time Monitoring

Track system health, performance metrics, and alerts in real-time across all your deployments.

{["CPU", "Memory", "Network", "Storage"].map((metric) => (

{Math.floor(Math.random() * 40 + 60)}%

{metric}

))}

{/* Command Palette */}

Command Palette

Navigate anywhere instantly with powerful keyboard shortcuts.

{/* Analytics */}

Analytics

Deep insights into your application performance.

{/* Performance */}

Blazing Fast

Edge-optimized infrastructure for sub-50ms response times globally.

~32ms avg response

{/* Security */}

Enterprise Security

SOC2 compliant with end-to-end encryption and SSO support.

SOC2 GDPR HIPAA

) } [V0_FILE]typescriptreact:file="components/pricing.tsx" "use client" import { motion, useInView } from "framer-motion" import { useRef, useState } from "react" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" const plans = [ { name: "Starter", description: "Perfect for side projects and small teams", price: { monthly: 0, yearly: 0 }, features: ["3 team members", "10 projects", "Basic analytics", "Community support", "1GB storage"], cta: "Get Started", highlighted: false, }, { name: "Pro", description: "For growing teams that need more power", price: { monthly: 29, yearly: 24 }, features: [ "Unlimited team members", "Unlimited projects", "Advanced analytics", "Priority support", "100GB storage", "Custom domains", "API access", ], cta: "Start Free Trial", highlighted: true, }, { name: "Enterprise", description: "For organizations with advanced needs", price: { monthly: 99, yearly: 79 }, features: [ "Everything in Pro", "SSO & SAML", "Dedicated support", "SLA guarantee", "Unlimited storage", "Custom integrations", "Audit logs", ], cta: "Contact Sales", highlighted: false, }, ] function BorderBeam() { return (

) } export function Pricing() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly") return (

Simple, transparent pricing

Start free, scale as you grow. No hidden fees, no surprises.

{/* Billing Toggle */}

{plans.map((plan, index) => ( {plan.highlighted && } {plan.highlighted && (

{plan.name}

{plan.description}

${plan.price[billingCycle]} {plan.price.monthly > 0 && /month}

{billingCycle === "yearly" && plan.price.yearly > 0 && (

Billed annually (${plan.price.yearly * 12}/year)

)}

{feature}

))}

) } [V0_FILE]typescriptreact:file="components/final-cta.tsx" "use client" import { motion, useInView } from "framer-motion" import { useRef } from "react" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" export function FinalCTA() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

Ready to ship faster?

Join thousands of teams already building with Apex. Start free, no credit card required.

Free forever for individuals. Team plans start at $29/month.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" "use client" import { motion, useInView } from "framer-motion" import { useRef } from "react" const footerLinks = { Product: ["Features", "Pricing", "Changelog", "Roadmap", "API"], Resources: ["Documentation", "Guides", "Blog", "Community", "Templates"], Company: ["About", "Careers", "Press", "Partners", "Contact"], Legal: ["Privacy", "Terms", "Security", "Cookies", "Licenses"], } export function Footer() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-50px" }) return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { SmoothScroll } from "@/components/smooth-scroll" import { Navbar } from "@/components/navbar" import { Hero } from "@/components/hero" import { LogoMarquee } from "@/components/logo-marquee" import { BentoGrid } from "@/components/bento-grid" import { Pricing } from "@/components/pricing" import { FinalCTA } from "@/components/final-cta" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]png:file="public/professional-headshot-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-1-spfi97tvcmvgfe3UxRtUyT6KlFisSn.png" [V0_FILE]png:file="public/professional-headshot-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-2-fF4QwZbLapeS9UWSfZW1pSbL3rQ9ej.png" [V0_FILE]png:file="public/professional-headshot-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-3-xOv7aWpIPGOMuof5Yod5rTrEgVIH7A.png" [V0_FILE]png:file="public/professional-headshot-4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-4-JBsc5CmAxyMHIrhqjwh4SHRpvj5xk8.png" [V0_FILE]png:file="public/professional-headshot-5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-5-2kUOcCr6zm5182fTJa6RKeD7LHXWXz.png" [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "lenis": "1.3.17", "framer-motion": "12.24.5" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }

About

Tags

Share

About

Tags

Share

More from rajoninternet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rajoninternet

More Templates Like This